<template>
  <div>
    <div class="message">
      <el-form :rules="rules" :model="model" label-width="100px" ref="ruleForm">
        <el-row :disabled="canEdit">
          <el-col :span="10">
            <el-form-item label="头像" >
              <el-upload
                  name="avatar"
                  class="avatar-uploader"
                  action="http://localhost:3000/admin/uploadImages"
                  :show-file-list="true"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthHeader()"
              >
                <img
                    v-if="model.avatar"
                    :src="model.avatar"
                    class="avatar"
                />
                <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"
                ></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input
                  :disabled="canEdit"
                  v-model="model.name"
                  placeholder=""
                  style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                  v-model="model.phone"
                  placeholder=""
                  style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item label="管理等级">
              <el-select
                  :disabled="canEdit"
                  v-model="model.authoritylever"
                  placeholder=""
              >
                <el-option
                    v-for="(item, i) in authorityleverList"
                    :key="i"
                    :label="item.name"
                    :value="item.lever"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="margin-top: 140px">
            <el-form-item label="居住地">
              <el-input
                  v-model="model.livein"
                  placeholder=""
              ></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="model.department" placeholder="">
                <el-option
                    v-for="(item, i) in departmentList"
                    :key="i"
                    :label="item"
                    :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="在职时间 ">
              <el-date-picker
                  :disabled="canEdit"
                  v-model="model.staying"
                  placeholder=""
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="100px">
        <el-form-item>
          <el-button type="success" @click="edit">超级管理员编辑</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {mapState} from "vuex"
export default {
  name: "Message",
  data() {
    let validatePhone = (rule, value, callback) => {
      let regExp = /^1[3-9]\d{9}$/
      if (!regExp.test(value)) {
        callback(new Error("手机号格式不正确!"))
      } else {
        callback();
      }
    };
    return {
      rules: {
        phone: {validator: validatePhone, trigger: "blur"}
      },
      canEdit: true,
      departmentList: ["研发", "美术", "管理"],
      authorityleverList: {
        lever1: {lever: 1, name: "用户"},
        lever2: {lever: 2, name: "超级管理员"},
      },
      model: {
        avatar: "",
        name: "admin",
        phone: "17366666666",
        authoritylever: 1,
        livein: "广州",
        department: "研发",
        staying: ["2022-01-04", "2022-09-09"],
      },
    };
  },
  methods: {
    // 验证
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    //获取数据
    async fetch() {
      const id = this.$route.params.id
      console.log(id);
      const model = await this.$http.get(`/admin/message/${id}`);
      // this.model = model;
      console.log(model.data.staying);
      if (model.data.staying[1] == "") {
        console.log(123);
        model.data.staying[1] = moment().format("YYYY-MM-DD");
      }
      this.model = model.data;
    },
    handleAvatarSuccess(value) {
      console.log(value);
      this.model.avatar = value.message.file.url
    },
    beforeAvatarUpload() {
    },
    //编辑
    edit() {
      if (!(this.adminMessage.authoritylever === 2)) {
        return this.$message({
          type: "info",
          message: "您不是超级管理员"
        })
      }
      this.canEdit = false
    },
    //保存
    submit() {
      console.log(12121)
      console.log(this.$refs.ruleForm);
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log("success");
          await this.$http.post("/admin/message", this.model).then(() => {
                this.$message({
                  type: "success",
                  message: "保存成功!"
                })
              }
          );
        } else {
          console.log("err");
          this.$message({
            type: "error",
            message: "您没有权限更改他人用户信息!",
          })
        }
      })

    },
  },
  computed: {
    ...mapState(["adminMessage"])
  },
  mounted() {
    // console.log(123);
    this.fetch();
  },
};
</script>

<style lang="scss">
.message {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>